<template>
  <Layout>
    <PageHeader :title="title"></PageHeader>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-md-3" @click="jump('/datahouse')">
                <div class="media">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-checkbox-circle-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数仓检索</h5>
                    <p class="mb-0">对所有采集数据的管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3" @click="jump('/datahouse/example')">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-database-2-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数仓实例</h5>
                    <p class="mb-0">对所有数据存储实例管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3" @click="jump('/datahouse/processing')">
                <div class="media mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-funds-line"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数据处理</h5>
                    <p class="mb-0">对数据处理的策略和接口管理</p>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="media selec mt-4 mt-md-0">
                  <div class="avatar-sm mr-3">
                    <span
                      class="
                        avatar-title
                        bg-light
                        rounded-circle
                        text-primary
                        font-size-24
                      "
                    >
                      <i class="ri-align-vertically"></i>
                    </span>
                  </div>
                  <div class="media-body align-self-center overflow-hidden">
                    <h5>数据融合</h5>
                    <p class="mb-0">多源实时清洗,同步与集成</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="all-products">数据执行任务  / 100个任务，97个正常，2个停止，1个异常</div>
      <div class="row">
        <div class="col-xl-3 col-sm-6">
          <div class="card" style="min-height: 305px;">
            <div class="card-body" style="display: flex;align-items: center;">
              <div style="width: 100%;text-align: center;">
                <b-button @click="newTask" variant="primary">新建任务</b-button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6" v-for="(data, index) in shopsData" :key="index">
          <div class="card">
            <div class="card-body">
              <div class="top-name">
                <h5 class="text-truncate">
                  {{data.title}}
                  <span v-if="!data.status" class="errorinfo">
                    <i class="ri-error-warning-fill"></i>出现三条错误信息
                  </span>
                </h5>
              </div>
              <hr class="my-4" />
              <div>
                <div>
                  <img :src="`${data.image}`" alt style="width:30px;" />
                  <span style="margin-left:10px;">{{data.name}}</span>
                </div>
                <div style="margin-top: 20px;">
                  <img :src="`${data.image}`" alt style="width:30px;" />
                  <span style="margin-left:10px;">{{data.name}}</span>
                </div>
              </div>
              <hr class="my-4" />
              <div v-if="data.status" class="row">
                <div class="col-6">
                  <h5 class="text-muted mb-2">进行中</h5>
                  <p>增量数据</p>
                </div>
                <div class="col-6">
                  <h5 style="min-height: 20px;" class="text-muted mb-2"></h5>
                  <p>已同步三行</p>
                </div>
              </div>
              <div v-else class="row">
                <div class="col-6">
                  <h5 style="margin-bottom: 0.2rem !important;" class="text-muted mb-2">进行中</h5>
                  <p style="margin-bottom: 0;">已完成全量</p>
                  <p style="margin-bottom: 0;">等待增量数据</p>
                </div>
                <div class="col-6" style="text-align: center;">
                  <el-progress color="#5664d2" type="circle" :width="60" :percentage="100"></el-progress>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../../layouts/main";
import PageHeader from "@/components/page-header";
export default {
  components: { Layout, PageHeader },
  data () {
    return {
      title: "数据融合",
      shopsData: [
        {
          image: require("@/assets/images/companies/img-1.png"),
          title: "Nedick's",
          name: "Wayne McClain",
          products: 86,
          balance: "$12,456",
          status: true,
        },
        {
          image: require("@/assets/images/companies/img-2.png"),
          title: "Brendle's",
          name: "David Marshall",
          products: 72,
          balance: "$10,352",
          status: true,
        },
        {
          image: require("@/assets/images/companies/img-6.png"),
          title: "Micro Design",
          name: " Brian Correa",
          products: 71,
          balance: "$11,523",
          status: true,
        },
        {
          image: require("@/assets/images/companies/img-3.png"),
          title: "Tech Hifi",
          name: "Katia Stapleton",
          products: 75,
          balance: "$9,963",
          status: false,
        }
      ],
    }
  },
  methods: {
    jump(url){
      this.$router.push(url)
    },
    newTask(){
      this.$router.push("/datahouse/newTask")
    },
  }
}
</script>
<style lang="scss" scoped>
.row{
  .col-md-3{
    cursor: pointer;
    .media{
      border-right: 1px solid #eeeeee;
      i,h5,p{
        color: #cccccc;
      }
      p{
        font-size: 0.8rem;
      }
    }
    .selec{
      i{
        color: #5664d2;
      }
      h5{
        color: rgba(0, 0, 0, 0.85);
      }
      p{
        color: #74788d;
      }
    }
  }
  .col-md-3:last-child{
    .media{
      border-right: 0;
    }
  }
}


.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
}
.errorinfo{
  color:#ff3d60;
  font-size: .9rem;
  i{
    vertical-align: bottom;
  }
}
.text-muted{
  color: #5664d2!important;
}
.col-xl-3{
  flex: 0 0 20%;
  max-width: 20%;
}
</style>
